<template>
  <div>
    <!-- 头部 -->
    <p-head></p-head>
    <!-- 横通 -->
    <div class="tips">
      <img src="../../img/lianxi.jpg" alt="" />
      <div class="tips_title">
        <h1>联系</h1>
        <h2>CONTACT</h2>
      </div>
    </div>
    <div class="layout contact">
      <div class="contact_l">
        <h2>联系我们</h2>
        <h3>山西盈锋科技有限责任公司</h3>
        <h4>如果您对我们的产品有什么意见或者建议，请与我们保持联络！</h4>
        <div>
          <span class="iconfont yf-icon-shouhuodizhi"></span
          >地址：北京市朝阳区双惠苑甲5号A座1005室
        </div>
        <div>
          <span class="iconfont yf-icon-24gl-phoneLoudspeaker"></span
          >电话：188-1154-7597
        </div>
        <div><span class="iconfont yf-icon-weixin1"></span>微信：llt219222</div>
        <div>
          <span class="iconfont yf-icon-youxiang"></span
          >邮箱：yfkeji6688@163.com
        </div>
      </div>
      <div class="contact_r">
<!--        <el-input v-model="addressKeyword" placeholder="请输入地址来直接查找相关位置"></el-input>-->
        <baidu-map class="bmView" :scroll-wheel-zoom="true" :center="location" :zoom="zoom"  ak="jRei6AdBGRmGTrC94C7vohLZTCzwqdq0">
          <bm-view style="width: 100%; height:100%; flex: 1"></bm-view>
<!--          <bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none"></bm-local-search>-->
          <bm-marker :position="markLocation" @click="checkDetail" >
          </bm-marker>
        </baidu-map>
      </div>
    </div>
    <div class="relation">
      <img class="relationbg" src="../../img/lianxi2.jpg" alt="" />
      <div class="r_content">
        <h2>在线留言</h2>
        <div class="line"></div>
        <h3>如果您有什么需求，请及时与我们联系</h3>
        <h4>If you have any requirement, please contact us in time</h4>
        <div class="tab">
          <template>
            <el-form ref="form" :model="form">
              <el-input
                v-model="form.companyname"
                placeholder="公司名称"
                style="width: 45%"
                height="50px"
                suffix-icon="el-icon-office-building"
              ></el-input>
              <el-input
                v-model="form.name"
                placeholder="您的姓名"
                style="width: 45%"
                height="50px"
                suffix-icon="el-icon-user-solid"
              ></el-input>
              <el-input
                v-model="form.phone"
                placeholder="手机号码"
                style="width: 45%"
                suffix-icon="el-icon-phone"
                height="50px"
              ></el-input>
              <el-select
                v-model="form.business"
                placeholder="咨询业务"
                style="width: 45%"
                height="50px"
              >
                <el-option label="高端网站定制" value="1"></el-option>
                <el-option label="响应式网站" value="2"></el-option>
                <el-option label="移动互联网" value="3"></el-option>
                <el-option label="运营维护" value="4"></el-option>
              </el-select>

              <el-input
                type="textarea"
                v-model="form.content"
                placeholder="内容"
                style="width: 95%"
                height="120px"
              ></el-input>
            </el-form>
            <div class="sub" @click="onSubmit">提交</div>
          </template>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <p-foot></p-foot>
  </div>
</template>
<script>
// import {post} from "../../http/api";
import {post} from "@/http/request";
import {successAlert,errorAlert} from '../../utils/alert';
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmView from 'vue-baidu-map/components/map/MapView.vue'
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue'
// import {BaiduMap,BmView,BmLocalSearch} from 'BaiduMap'
// import BaiduMap from 'vue-baidu-map'
export default {
  components: {
    BaiduMap,
    BmView,
    BmLocalSearch
  },
  props: [],
  data() {
    return {
      location: {
        lng: 116.582924,
        lat: 39.909252
      },
      zoom: 12.8,
      markLocation: {
        lng: 116.582924,
        lat: 39.909252
      },
      showTitle: "信息窗口",
      showFlag:false,
      addressKeyword: "",


    form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },


    };
  },
  methods: {
    checkDetail(e){
      this.showFlag = !this.showFlag
    },
    onSubmit() {
      if(this.form.companyname ==undefined){
        errorAlert("请填写公司名称!");return;
      }
      if(this.form.phone ==undefined){
        errorAlert("请填写正确电话号!");return;
      }
      if(this.form.name ==undefined){
        errorAlert("请填写姓名名称!");return;
      }
      if(this.form.content ==undefined){
        errorAlert("请填写描述内容!");return;
      }
      if(this.form.business ==undefined){
        errorAlert("请选择质询类型!");return;
      }
      let data = {
        company: this.form.companyname,
        phone: this.form.phone,
        username: this.form.name,
        contents: this.form.content,
        type: this.form.business
      }
      post("/api/home/callMe",data)
          .then((res) => {
            if(res.data.code==200){
              successAlert("添加成功!");
                   this.form.companyname = "";
                 this.form.phone ="";
                   this.form.name ="";
                   this.form.content ="";
                  this.form.business ="";
            }else{
              console.log(res.data)
              errorAlert(res.data.message);
            }
          })
          .catch((err) => {
            errorAlert(err.message);
            console.log(err+'222');
          });
    },

    getLocationPoint(e) {
      this.lng = e.point.lng;
      this.lat = e.point.lat;
      /* 创建地址解析器的实例 */
      let geoCoder = new BMap.Geocoder();
      console.log(geoCoder);
      /* 获取位置对应的坐标 */
      geoCoder.getPoint(this.addressKeyword, point => {
        this.selectedLng = point.lng;
        this.selectedLat = point.lat;
      });
      /* 利用坐标获取地址的详细信息 */
      geocoder.getLocation(e.point, res=>{
        console.log(res);
      })
    }


  },
  mounted() {


  },
  computed: {},
  watch: {},

};
</script>
<style  lang="less">
@import "../../less/index.less";
@import "../../assets/css/reset.css";
.contact {
  padding: 60px 0;
  // background-color: pink;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.contact_l {
  width: 50%;
}
.contact_l h2 {
  font: 38px/146px "微软雅黑";
  font-weight: bold;
}
.contact_l h3 {
  font: 30px/80px "微软雅黑";
}
.contact_l h4 {
  color: #333333;
  font: 18px/30px "微软雅黑";
  margin-bottom: 30px;
}
.contact_l div {
  height: 60px;
  font: 16px "微软雅黑";
  color: #333333;
  display: flex;
  align-items: center;
}
.contact_l div span {
  color: #333333;
  font: 30px "微软雅黑";
  padding-right: 16px;
}
.contact_r {
  width: 50%;
  height: 612px;
  //background: #3a6cfe;
}
.bmView{
  height: 612px;
}
.relation {
  position: relative;
  width: 100%;
  height: 660px;
  margin-bottom: 20px;
}
.relation .relationbg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.r_content {
  position: absolute;
  left: 5%;
  top: 0;
  width: 90%;
  height: 100%;
}
.r_content h2 {
  font: 30px/62px "微软雅黑";
  color: #fff;
  margin-top: 40px;
}
.r_content .line {
  width: 66px;
  height: 2px;
  background-color: #117bdf;
}
.r_content h3 {
  font: 18px/46px "微软雅黑";
  margin-top: 12px;
  color: #fff;
}
.r_content h4 {
  font: 12px "微软雅黑";
  color: #fff;
}
.tab {
  padding: 40px 0 60px;
  width: 100%;
  // background: pink;
}
.tab .el-input {
  margin-right: 5%;
  margin-bottom: 20px;
}
.tab .el-form .el-input .el-input__inner {
  height: 50px;
}
.tab .el-form .el-textarea .el-textarea__inner{
  height: 120px;
}
.tab .sub {
  width: 190px;
  height: 50px;
  border: 2px solid #ffffff;
  color: #fff;
  font: 16px/50px "微软雅黑";
  text-align: center;
  margin-top: 60px;
  
}
.tab .el-textarea__inner{
  font-size: 14.5px;
  font-family: "微软雅黑";
}
.tab .sub:hover {
  border-radius: 5px;
 color: black;
 background-color: #fff;
 cursor: pointer;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/*添加动画*/
.contact,.relation {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInLeft;
}
/* 响应式布局 */

@media screen and (min-width: 992px) {
  
}

@media screen and (max-width: 992px) {
  .contact_l h2{
   line-height: 80px;
 }
 .contact_l{
    width: 100%;
  }
  .contact_r{
    width: 80%;
    margin: 0 auto;
    height: 80%;
  }
}

@media screen and (max-width: 768px) {
  .contact_l{
    width: 100%;
  }
  .contact_l h2{
   line-height: 80px;
 }
 
 .contact_l h3{
   line-height: 50px;
 }
}
@media screen and (max-width: 600px) {
  .tips{
    height: 300px;
  }
  .tips .tips_title h1{
    font-size: 34px;
  }
  .tips .tips_title h2{
    font-size: 32px;
  }
  
  .contact_l{
    width: 100%;
  }
 


  
 
}
@media screen and (max-width: 500px) {
 .contact_l h2{
   font-size: 30px;
 }
 .contact_l h3{
   font-size: 24px;
 }
 .contact_l h4{
   font-size: 16px;
 }
 .contact_l div span{
   font-size: 24px;
 }
 .contact_l div{
   font-size:  14px;
 }
 .contact_r{
   width: 100%;
 }
 .bmView{
   height: 250px;
 }
 .tab .sub{
   margin: 0 auto;
   margin-top: 60px;
 }
}
</style>